<template>
  <div id="categories" class="app-container">
    <div class="filter-container">
      <div class="filter-container">
        <!-- 添加分类 -->
        <el-button class="filter-item" type="primary" @click="openAddDialog">添加分类</el-button>
        <!-- 使用添加分类弹框组件 -->
        <add-item ref="add" :dialog="addFormVisible" @close="closeAddDialog" @add="handleAddUser" />
      </div>

      <!-- 树形控件 tree-table，需要下载依赖vue-table-with-tree-grid 并且在main.js引入 -->
      <!-- 表格主体 -->
      <tree-table class="treeTable" :data="categoriesList" :columns="columns" :selection-type="false" :expand-type="false" :show-index="false" border :show-row-hover="false">
        <!-- 是否有效 -->
        <template slot="isok" slot-scope="{row}">
          <i v-if="row.cat_deleted === false" class="el-icon-success" style="color: lightgreen" />
          <i v-else class="el-icon-error" style="color: lightgreen" />
        </template>
        <!-- 排序 -->
        <template slot="order" slot-scope="{row}">
          <el-tag v-if="row.cat_level === 0" size="mini">一级分类</el-tag>
          <el-tag v-else-if="row.cat_level === 1" type="success" size="mini">二级分类</el-tag>
          <el-tag v-else type="warning" size="mini">三级分类</el-tag>
        </template>
        <template slot="opt" slot-scope="{row}">
          <!-- 修改按钮 -->
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="openEditDialog(row)">编辑</el-button>
          <!-- 删除按钮 -->
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeCategoriesById(row)">删除</el-button>
        </template>
      </tree-table>
    </div>

    <!-- 使用分页组件 -->
    <pagination-item v-show="total>0" :total="total" :page.sync="queryInfo.pagenum" :limit.sync="queryInfo.pagesize" @pagination="getCategoriesList" />

    <!-- 使用编辑用户弹框组件 -->
    <edit-item ref="edit" :dialog="editFormVisible" @close="closeEditDialog" @edit="handleEditCategories" />

  </div>
</template>

<script>
import { categoriesList, parentCategoriesList, addCategories, removeCategories, getCategoriesById, editCategoriesById } from '@/api/categories'

// 1.导入组件
import AddItem from './components/add'
import EditItem from './components/edit'
import PaginationItem from './components/pagination'

export default {
  name: 'Categories',
  // 2.注册组件
  components: {
    'add-item': AddItem,
    'edit-item': EditItem,
    'pagination-item': PaginationItem
  },
  data() {
    return {
      // 查询条件
      queryInfo: {
        type: 3, // 分类列表级别
        pagenum: 1, // 当前页码值
        pagesize: 5 // 每页显示多少条
      },
      // 商品分类的数据列表，默认为空
      categoriesList: [],
      // 总数据条数
      total: 0,
      // 添加用户对话框弹窗，开始是关闭的
      addFormVisible: false,
      // 编辑用户对话框弹窗，开始是关闭的
      editFormVisible: false,
      // 为table指定列的定义
      columns: [
        {
          label: '分类名称', // 表示将当前列定义为模板列
          prop: 'cat_name', // 表示当前这一列使用模板名称
          headerAlign: 'center', // 对应列标题的对齐方式
          align: 'center', // 对应列内容的对齐方式
          width: '200px'
        },
        { label: '是否有效', type: 'template', template: 'isok', headerAlign: 'center', align: 'center', width: '100px' },
        {
          label: '分类级别', type: 'template', template: 'order', headerAlign: 'center', align: 'center', width: '100px'
        },
        {
          label: '操作', type: 'template', template: 'opt', headerAlign: 'center', align: 'center', width: '200px'
        }
      ]
    }
  },
  created() {
    this.getCategoriesList()
  },
  methods: {
    // 商品分类数据列表
    getCategoriesList() {
      const data = this.queryInfo
      // 将拿到的数据发送给后台
      categoriesList(data).then((response) => {
        if (response.data.meta.status !== 200) {
          return this.$message.error('获取商品分类失败！')
        }
        // 把数据列表，赋值给catelist
        this.categoriesList = response.data.data.result
        // 为总数据条数赋值
        this.total = response.data.data.total
      })
    },

    // 二、添加分类
    // 1.点击按钮，打开弹框
    openAddDialog() {
      this.addFormVisible = true
      // 获取父级分类列表,渲染级联选择器
      const type = 2 // 只显示两层分类列表
      // 将拿到的数据发送给后台
      parentCategoriesList(type).then((response) => {
        if (response.data.meta.status !== 200) {
          return this.$http.error('获取父级分类数据失败！！')
        }
        // 把数据列表，赋值给catelist
        this.$refs['add'].parentCateList = response.data.data
      })
    },
    // 2.接收组件的请求关闭方法，关闭弹框
    closeAddDialog() {
      // 关闭弹框前的回调
      var msg = '是否放弃新增分类？'
      this.$confirm(msg, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
      }).then(() => {
        this.addFormVisible = false // 关闭对话框
        // 重置表单
        this.$refs['add'].$refs['addFormRef'].resetFields()
        this.$refs['add'].selectedKeys = []
        this.$refs['add'].addCateForm.cat_pid = 0
        this.$refs['add'].addCateForm.cat_level = 0
      }).catch(() => {
        this.$message('已取消')
      })
    },
    // 3.接收组件的请求增加方法，向后台发送请求
    handleAddUser(data) {
      this.addFormVisible = false
      addCategories(data).then((response) => {
        if (response.data.meta.status !== 201) {
          return this.$http.error('获取商品分类数据失败！')
        }
        this.categoriesList.unshift(response.data.data)
        // 重置表单
        this.$refs['add'].$refs['addFormRef'].resetFields()
        this.$refs['add'].selectedKeys = []
        this.$refs['add'].addCateForm.cat_pid = 0
        this.$refs['add'].addCateForm.cat_level = 0
        // 刷新列表
        this.getCategoriesList()
        this.$notify({ title: '提示', message: '添加成功！', type: 'success', duration: 2000 })
      })
    },
    // 添加分类结束

    // 三、删除分类
    removeCategoriesById(data) {
      // 弹框提示是否要删除
      var msg = '此操作将永久删除该项数据, 是否继续?'
      this.$confirm(msg, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
      }).then(() => {
        removeCategories(data).then((response) => {
          this.categoriesList.splice(data.cat_id, 1)
          if (response.data.meta.status !== 200) {
            return this.$message.error('删除权限失败！')
          }
          // 刷新页面
          // this.getCategoriesList()
          this.$notify({ title: '提示', message: '删除权限成功！', type: 'success' })
        })
      }).catch(() => {
        this.$message.info('已取消操作！')
      })
    },

    // 四、编辑提交分类
    // 展示编辑提交分类的对话框
    openEditDialog(data) {
      // 1.先进行请求，渲染数据到编辑对话框
      getCategoriesById(data).then((response) => {
        if (response.data.meta.status !== 200) {
          return this.$message.error('查询用户信息失败')
        }
        this.$refs['edit'].editForm = response.data.data
        // 获取父级分类的数据列表
        const type = 2
        // 将拿到的数据发送给后台
        parentCategoriesList(type).then((response) => {
          if (response.data.meta.status !== 200) {
            return this.$http.error('获取父级分类数据失败！！')
          }
          this.$refs['edit'].parentCateList = response.data.data
          // 渲染父级分类的id
          this.editFormVisible = true
        })
      })
    },
    // 2.接收组件的请求关闭方法，关闭弹框
    closeEditDialog() {
      // 关闭弹框前的回调
      var msg = '是否放弃编辑商品分类'
      this.$confirm(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 关闭对话框
        this.editFormVisible = false
      }).catch(() => {
        this.$message('已取消')
      })
    },
    // 3.接收组件的请求编辑方法，向后台发送请求
    handleEditCategories(data) {
      this.editFormVisible = false
      editCategoriesById(data).then((response) => {
        if (response.data.meta.status !== 200) {
          return this.$message.error('更新用户信息失败！')
        }
        this.getCategoriesList() // 刷新列表
        this.$notify({ title: '提示', message: '更新用户信息成功！', type: 'success', duration: 2000 }) // 提示修改成功
      })
    }
    // 编辑结束
  }
}
</script>

<style scoped>
.treeTable {
  color: #909399;
  font-size: 14px;
  margin-top: 15px;
}
</style>
